import React, {useState, useEffect} from 'react';
import {
  Text,
  View,
  ScrollView,
  StyleSheet,
  StatusBar,
  SafeAreaView,
  Dimensions,
  Image,
  TouchableOpacity,
} from 'react-native';
import {Stack} from 'native-base';
const windowWidth = Dimensions.get('window').width;
const Commodify = () => {
  const [indes, setIndes] = useState('0');
  const [sellist, setSellist] = useState([
    {
      id: '1',
      name: '热门',
    },
    {
      id: '2',
      name: '贡献值翻倍',
    },
    {
      id: '3',
      name: '手机',
    },
    {
      id: '4',
      name: '数码',
    },
    {
      id: '5',
      name: '电器',
    },
    {
      id: '6',
      name: '生活用品',
    },
  ]);

  const imgList = [
    {
      img: require('../../../../assets/home/jd.png'),
    },
    {
      img: require('../../../../assets/home/jd.png'),
    },
    {
      img: require('../../../../assets/home/jd.png'),
    },
    {
      img: require('../../../../assets/home/jd.png'),
    },
  ];
  const img = require('../../../../assets/home/jd.png')
  const [data, setData] = useState([
    {
      id: '1',
      img: img,
      title: '家电盲盒【保底欧皇】',
      hd: '十连抽买9送1',
      money: '99',
      yj: '299',
      bfl: '100%',
      cj: '99-54999元',
      imglist: imgList,
    },
    {
      id: '2',
      img: img,
      title: '家电盲盒【保底欧皇】',
      hd: '十连抽买9送1',
      money: '99',
      yj: '299',
      bfl: '100%',
      cj: '99-54999元',
      imglist: imgList,
    },
    {
      id: '3',
      img: img,
      title: '家电盲盒【保底欧皇】',
      hd: '十连抽买9送1',
      money: '99',
      yj: '299',
      bfl: '100%',
      cj: '99-54999元',
      imglist: imgList,
    },
  ]);

  const onPress = index => {
    console.log(index);
  };
  return (
    <View>
      <ScrollView
        style={styles.scrollView}
        horizontal={true}
        showsHorizontalScrollIndicator={false}>
        {sellist.map((item, index) => {
          return (
            <TouchableOpacity
              onPress={() => {
                setIndes(index);
              }}
              key={index}>
              <View
                key={index}
                style={indes == index ? styles.menlist : styles.menlistactive}>
                <Stack direction="row">
                  {index == '1' ? (
                    <Image
                      style={{
                        width: 10,
                        height: 12,
                        marginTop: 2,
                        marginRight: 2,
                      }}
                      source={require('../../../../assets/home/fire.png')}
                      alt="搜索"
                    />
                  ) : (
                    ''
                  )}

                  <Text style={indes == index ? styles.active : styles.actives}>
                    {item.name}
                  </Text>
                </Stack>
              </View>
            </TouchableOpacity>
          );
        })}
      </ScrollView>
      <View>
        {data.map((item, index) => {
          return (
            <View key={index}>
              <Image
                style={{width: 10, height: 12, marginTop: 2, marginRight: 2}}
                source={require('../../../../assets/home/fire.png')}
                alt="搜索"
              />
              <Text>{item.img}</Text>
            </View>
          );
        })}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    width: windowWidth - 30,
    height: 50,
    marginHorizontal: 20,
    marginTop: 15,
  },
  text: {
    fontSize: 42,
  },
  menlist: {
    marginRight: 50,
    textAlign: 'center',
    height: 50,
  },
  menlistactive: {
    marginRight: 50,
    textAlign: 'center',
    height: 50,
    marginTop: 3,
    position: 'relative',
  },
  active: {
    color: '#666666',
    fontSize: 16,
    borderBottomWidth: 4,
    borderBottomColor: '#589CF6',
  },
  actives: {
    fontSize: 11,
  },
});
export default Commodify;
